<template>
	<view :style="{ 'background':'#FFB3C5 url('+HTTP_IMG_URL()+'/merchant/add_bg.png) no-repeat','background-size': '100%'}" class="home-wrap u-m-b-20">
		<base-nav-bar :backIconColor="'#fff'" :background="{'background':'url('+HTTP_IMG_URL()+'/merchant/add_bg.png) no-repeat','background-size': '100%'}" :isBack="true">
			<text
				slot="content"
				style="color: #fff; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				优惠券设置
			</text>
		</base-nav-bar>
		<view class="contents-coupon">
			<view class="merchant-title u-flex u-flex-between u-flex-items-center u-p-t-20 u-p-b-20 u-p-r-40 u-p-l-40">
				<view class="merchant-main-title ">
					<view class="u-flex">
						<view class="integral-icon u-flex u-flex-start u-flex-items-center u-m-r-20">
							<view class="left-point u-m-r-14"></view>
							<view class="right-point"></view>
						</view>
						<view class="integral-title">添加优惠券</view>
					</view>
				</view>
				<view class="merchant-sub-title u-flex u-flex-end u-flex-items-center u-col-center " @click="jump('/pages-merchant/coupon/couponList')" v-if="couponId==''">
					<view class="u-font-28 u-m-r-10">发放历史</view>
					<view class="merchant-sub-title-btn">
						<u-icon :color="'#F84871'" name="arrow-right" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view class="content-box-all">
				<view class="content-box u-p-20 u-m-r-40 u-m-l-40">
					<!-- grid商家功能模块 -->
					<view class="u-flex u-flex-items-center u-flex-start u-flex-wrap">
						<u--form ref="uForm" :labelPosition="'top'" :labelStyle="{'margin-botttom':'10rpx'}" :model="form" style="width: 100%;">
							<u-form-item label="优惠券名称" labelWidth="120" prop="name">
								<u-input v-model="form.name" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}"
								         placeholder="请输入优惠券名称"/>
							</u-form-item>
							<u-form-item label="满减门槛及金额" labelWidth="120" prop="money">
								<view class="u-flex u-flex-between u-flex-items-center">
									<u-input v-model="form.money" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入金额">
										<text
											slot="prefix"
											style="border-right: 2rpx solid #FFB3C5;margin:0 3px 2px 0;color:#000;padding-right: 14rpx"
										>满
										</text>
									</u-input>
									<view style="width:5%;"></view>
									<u-input v-model="form.number" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入金额">
										<text
											slot="prefix"
											style="border-right: 2rpx solid #FFB3C5;margin:0 3px 2px 0;color:#000;padding-right: 14rpx"
										>减
										</text>
									</u-input>
								</view>
							</u-form-item>
							<u-form-item label="可领取时间" labelWidth="120" prop="begintime">
								<view :style="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" class="u-flex u-flex-between u-flex-items-center u-p-l-10 u-p-r-10">
									<u-icon :color="'#000'" :size="16" name="clock"></u-icon>
									<view @click="openBeginTime()">
										<u-input v-model="form.begintime" :border="false" inputAlign="center" placeholder="开始时间" readonly/>
									</view>
									<view style="width: 2%; height: 4rpx;background: #000;"></view>
									<view @click="openEndTime()">
										<u-input v-model="form.endtime" :border="false" inputAlign="center" placeholder="结束时间" readonly/>
									</view>
								
								</view>
							</u-form-item>
							<u-form-item label="有效期" labelWidth="120" prop="use_begtime">
								<view :style="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" class="u-flex u-flex-between u-flex-items-center u-p-l-10 u-p-r-10">
									<u-icon :color="'#000'" :size="16" name="clock"></u-icon>
									<view @click="openUseBegEndTime()">
										<u-input v-model="form.use_begtime" :border="false" inputAlign="center" placeholder="开始时间" readonly/>
									</view>
									<view style="width: 2%; height: 4rpx;background: #000;"></view>
									<view @click="openUseEndTime()">
										<u-input v-model="form.use_endtime" :border="false" inputAlign="center" placeholder="结束时间" readonly/>
									</view>
								</view>
							</u-form-item>
							<u-form-item label="发行总数量" labelWidth="120" prop="give_num">
								<u-input v-model="form.give_num" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入发行优惠券的总量"/>
							</u-form-item>
							<u-form-item label="每人限领人数" labelWidth="120" prop="allow_num">
								<u-input v-model="form.allow_num" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入限领数量"/>
							</u-form-item>
							<u-form-item label="兑换需要的积分数量" labelWidth="180" prop="score">
								<u-input v-model="form.score" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入兑换优惠券所需的数量"/>
							</u-form-item>
							<u-form-item label="优惠券说明" labelWidth="120" prop="content">
								<u-input v-model="form.content" :customStyle="{'background':'#FFFBFC','border-radius': '8px','border': '1px solid','border-color':'#FFB3C5!important'}" placeholder="请输入关于优惠券的说明"/>
							</u-form-item>
						</u--form>
						<view class="submit-btn" @click="submit">提交</view>
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker
			v-model="value1"
			:show="showBeginTime"
			mode="datetime"
			title="选择开始时间"
			@cancel="closeBeginTime"
			@confirm="chooseBeginTime"
		></u-datetime-picker>
		<u-datetime-picker
			v-model="value2"
			:show="showEndTime"
			mode="datetime"
			title="选择结束时间"
			@cancel="closeEndTime"
			@confirm="chooseEndTime"
		></u-datetime-picker>
		<u-datetime-picker
			v-model="value3"
			:show="showUseBegtime"
			mode="datetime"
			title="选择开始时间"
			@cancel="closeUseBeginTime"
			@confirm="chooseUseBeginTime"
		></u-datetime-picker>
		<u-datetime-picker
			v-model="value4"
			:show="showUseEndtime"
			mode="datetime"
			title="选择结束时间"
			@cancel="closeUseEndTime"
			@confirm="chooseUseEndTime"
		></u-datetime-picker>
	</view>
</template>

<script>

import {mapGetters} from 'vuex';
import {HTTP_IMG_URL} from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			couponId      : '',
			showBeginTime : false,
			showEndTime   : false,
			showUseBegtime: false,
			showUseEndtime: false,
			value1        : Number(new Date()),
			value2        : Number(new Date()),
			value3        : Number(new Date()),
			value4        : Number(new Date()),
			endTime:'',
			beginTime:'',
			useBeginTime:'',
			useEndTime:'',
			form          : {
				name       : '',
				money      : '',
				number     : '',
				begintime  : '',
				endtime    : '',
				use_begtime: '',
				use_endtime: '',
				give_num   : '',
				allow_num  : '',
				score      : '',
				content    : ''
			},
			rules         : {
				name: [
					{
						required: true,
						message : '请输入优惠券名称',
						trigger : ['blur', 'change']
					}
				]
			},
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
	
	},
	onHide() {
	},
	onLoad(options) {
		if (options&&options.id) {
			this.couponId = options.id
			this.getCouponDetail();
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		chooseBeginTime(e) {
			this.showBeginTime = false;
			console.log("=== this.showBeginTime = false;", e)
			this.beginTime      = e.value;
			this.form.begintime = this.formatTimestamp(this.beginTime);
		},
		closeBeginTime() {
			this.showBeginTime = false;
		},
		chooseEndTime(e) {
			this.showEndTime = false;
			console.log("=== this.showBeginTime = false;", e)
			this.endTime      = e.value;
			this.form.endtime = this.formatTimestamp(this.endTime);
		},
		closeEndTime() {
			this.showEndTime = false;
		},
		chooseUseBeginTime(e) {
			this.showUseBegtime = false;
			console.log("=== this.showBeginTime = false;", e)
			this.useBeginTime     = e.value;
			this.form.use_begtime = this.formatTimestamp(this.useBeginTime);
		},
		closeUseBeginTime() {
			this.showUseBegtime = false;
		},
		chooseUseEndTime(e) {
			this.showUseEndtime = false;
			console.log("=== this.showBeginTime = false;", e)
			this.useEndTime       = e.value;
			this.form.use_endtime = this.formatTimestamp(this.useEndTime);
		},
		closeUseEndTime() {
			this.showUseEndtime = false;
		},
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url  : path,
				query: parmas
			});
		},
		submit() {
			let that = this;
			that.$refs.uForm.validate().then(res => {
				let fromData = {
					...that.form,
				}
				if (this.couponId) {
					fromData = {
						...fromData,
						id: that.couponId
					}
					that.$Api.merchant.couponEditPost(fromData).then(res => {
						uni.$u.toast('修改成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}).catch(err => {
						console.log(e)
					})
				} else {
					this.$Api.merchant.couponAdd(fromData).then(res => {
						uni.$u.toast('发放成功')
						setTimeout(() => {
							that.jump('/pages-merchant/coupon/couponList')
						}, 500)
					}).catch(err => {
						console.log(e)
					})
				}
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		sexSelect() {
		
		},
		openBeginTime() {
			this.showBeginTime = true;
		},
		openEndTime() {
			this.showEndTime = true;
		},
		openUseBegEndTime() {
			this.showUseBegtime = true;
		},
		openUseEndTime() {
			this.showUseEndtime = true;
		},
		formatTimestamp(timestamp) {
			const date    = new Date(timestamp);
			const year    = String(date.getFullYear());
			const month   = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且保证两位数
			const day     = String(date.getDate()).padStart(2, '0'); // 保证两位数
			const hours   = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		getCouponDetail(){
			this.$Api.merchant.couponEdit({id:this.couponId}).then(res => {
				let data = JSON.parse(JSON.stringify(res.data));
				this.form = data;
				this.value1 = data.begintime*1000
				this.value2 = data.endtime*1000
				this.value3 = data.use_begtime*1000
				this.value4 = data.use_endtime*1000
				this.form.begintime = this.formatTimestamp(res.data.begintime*1000)
				this.form.endtime = this.formatTimestamp(res.data.endtime*1000)
				this.form.use_begtime = this.formatTimestamp(res.data.use_begtime*1000)
				this.form.use_endtime = this.formatTimestamp(res.data.use_endtime*1000)
			}).catch(err => {
				console.log(e)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 105vh;
	background: rgba(255,255,255,0.8);
	position: relative;
}

.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	
	.swipers {
		width: 100%;
	}
}

.nickname {
	font-size: 34rpx;
	font-weight: bold;
}

.content-box-all {
	
	min-height: 88vh;
	
	.content-box {
		background: #fff;
		border-radius: 30rpx;
		min-height: 80vh;
		width: calc(100% - 76rpx);
		
		.pay-item {
			width: 25%;
		}
	}
}

::v-deep .u-form {
	width: 100%;
}

.images-content {
	width: 100%;
	height: 300rpx;
	display: flex;
	border: 1rpx solid #eee;
}
.contents-coupon{
	background: rgba(255,255,255,0.8);
	border-radius: 18px 18px 0px 0px;
	position: absolute;
	top: 190rpx;
	.merchant-title {
		width: 100%;
		height: 54px;
		.merchant-main-title {
			color: #F84871;
			text-align: center;
		}
		
		.merchant-sub-title {
			color: #F84871;
			
			.merchant-sub-title-btn {
				color: #F84871;
			}
		}
	}
	
	.submit-btn {
		margin-top: 20rpx;
		width: 100%;
		height: 84rpx;
		background: #FF7C9B;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
	}
	
	.integral-title {
		font-weight: 800;
		font-size: 36rpx;
		color: #F84871;
		line-height: 25px;
		text-align: left;
		font-style: normal;
	}
	
	.integral-icon {
		.left-point {
			width: 5px;
			height: 20px;
			background: #FFBECD;
			border-radius: 4px;
		}
		
		.right-point {
			width: 5px;
			height: 13px;
			background: #F84871;
			border-radius: 4px;
		}
	}
}

</style>
